<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>锤子方向对齐属性【文本与图片】</title>
		<!-- 垂直方向对齐属性 vertical-algin
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及块元素的垂直居中
					  【文本和图片垂直居中（对齐）效果】
					  对齐分为四种：基线对齐、顶部对齐
					              居中对齐、底部对齐
					  元素种类：块元素、行元素、行内块元素
					  块元素特点：独占一行、设置宽高
					  行元素特点：一行内显示、不可设置宽高
					  网页：元素之间嵌套生成
					   行元素与块元素可以任意嵌套
					   前提：设置宽高---行套块
					                ---块套块  √
									---块套行  √
					   前提：一行内显示---行套块  √
					                ---块套块  ×
									---块套行  √
									---行套行  √
		 -->
		 <style>
			 im g:nth-child(1){
				 /* vertical-algin:baseline 默认基线对齐 */
				 vertical-align: baseline;
			 }
			 /* 问题：派生选择器，特点：找后代  p  img */
			 im g:nth-child(1){
			 				 /* vertical-algin:baseline 顶部对齐*/
			 				 vertical-align: top;
							 width: 500px;
							 height: 500px;
							 background: #ffff00;
			 }
			 img.baseline{
				 vertical-align:baseline;
			 }
			 img.top{
				 vertical-align: top;
			 }
			 img.middle{
				 vertical-align: middle;
			 }
			 img.bottom{
				 vertical-align: bottom;
			 }
		 </style>
	</head>
	<body>
		<!-- 需求结构：4个p，嵌套文字： 图片叫什么名字
	                    文字后加img，设定宽高：25px~100px
						每个图片后加：基线对齐、顶部对齐
						居中对齐、底部对齐
						-->
		<h1>文本与图片的垂直属性</h1>
		<p>黄金弗利萨<img class="baseline" src="img/1.png" alt="弗利萨" width="100px" height="200px"/>基线对齐</p>
		<p>超赛三悟空<img cass="top" src="img/2.png" alt="孙悟空" width="100px" height="200px" />顶部对齐</p>
		<p>魔人布欧<img class="middle" src="img/3.png" alt="布欧"width="100px" height="200px" />居中对齐</p>
		<p>自在极意贝吉塔<img class="bottom" src="img/4.png" alt="贝吉塔" width="100px" height="200px"/>底部对齐</p>
		<!-- css选择器--抓第一张图片...
		 思路：派生选择器：找后代+伪类选择器：添加效果[错误]
		 错误原因：html结构不符合派生特点：p包含四个img
		        伪类选择器，4个img需要在一个p中
		 p img:nth-child(1)
		 -->
	</body>
</html>